<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        body {
            margin: 30px;
        }

        .box {
            width: 30px;
            height: 30px;
            background: teal;
            margin-top: 20px;
        }
    </style>
    <script src='./vue.global.js'></script>
</head>

<body>
    <div id="demo">
        <button @click="show = !show">
            Toggle
        </button>

        <transition @beforeEnter="beforeEnter" @enter="enter" @leave="leave" :css="false">
            <div v-if="show" class="box">
            </div>
        </transition>
    </div>
    <script>
        const Demo = {
            data() {
                return {
                    show: false
                }
            },
            methods: {
                beforeEnter(el) {
                    gsap.set(el, {
                        scaleX: 0.8,
                        scaleY: 1.2
                    })
                },
                enter(el, done) {
                    gsap.to(el, {
                        duration: 1,
                        scaleX: 1.5,
                        scaleY: 0.7,
                        opacity: 1,
                        x: 150,
                        ease: 'elastic.inOut(2.5, 1)',
                        onComplete: done
                    })
                },
                leave(el, done) {
                    gsap.to(el, {
                        duration: 0.7,
                        scaleX: 1,
                        scaleY: 1,
                        x: 300,
                        ease: 'elastic.inOut(2.5, 1)',
                    })
                    gsap.to(el, {
                        duration: 0.2,
                        delay: 0.5,
                        opacity: 0,
                        onComplete: done
                    })
                }
            }
        }

        Vue.createApp(Demo).mount('#demo')
    </script>
</body>

</html>